<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乐购商城 - 商品展示</title>
    <script src="jq/jQuery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            text-decoration: none;
            font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
        }
        body {
            background-color: #f7f7f7;
            color: #333;
        }
        .main-container {
            width: 1200px;
            margin: 0 auto;
        }
        .category-tabs {
            display: flex;
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            margin-bottom: 15px;
            position: sticky;
            top: 80px;
            z-index: 90;
        }
        
        .tab-item {
            flex: 1;
            text-align: center;
            padding: 15px 0;
            font-size: 16px;
            color: #333;
            text-decoration: none;
            position: relative;
            transition: all 0.3s;
        }
        
        .tab-item.active {
            color: #000;
            font-weight: bold;
        }
        
        .tab-item.active:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 3px;
            background: #000;
        }
        
        .banner-section {
            margin-bottom: 15px;
            border-radius: 0px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .banner-img {
            width: 100%;
            display: block;
        }
        
        .goods-section {
            background: #fff;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .section-title {
            font-size: 18px;
            font-weight: bold;
        }
        
        .more-link {
            font-size: 14px;
            color: #999;
            text-decoration: none;
        }
        
        .goods-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
        }
        
        .goods-item {
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.3s;
            position: relative;
        }
        
        .goods-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .goods-img-container {
            position: relative;
            padding-top: 100%;
            overflow: hidden;
        }
        
        .goods-img {
            position: absolute;
            top: 50%;
            left: 50%;
            height: 100%;
            object-fit: cover;
            transform: translate(-50%,-50%);
            transition: transform 0.5s;
        }
        
        .goods-item:hover .goods-img {
            transform:  translate(-50%,-50%) scale(1.05);
        }
        
        .goods-tag {
            position: absolute;
            top: 10px;
            left: 10px;
            background: #ff2442;
            color: white;
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 4px;
            z-index: 1;
        }
        
        .goods-info {
            padding: 10px;
        }
        
        .goods-title {
            font-size: 14px;
            margin-bottom: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            height: 40px;
        }
        
        .goods-price {
            color: #ff2442;
            font-size: 18px;
            font-weight: bold;
        }
        
        .goods-original-price {
            font-size: 12px;
            color: #999;
            text-decoration: line-through;
            margin-left: 5px;
        }
        
        .goods-sold {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }
        
        /* 轮播图样式 */
        .carousel {
            position: relative;
            width: 100%;
            height: 400px;
            overflow: hidden;
            border-radius: 0px;
        }
        
        .carousel-inner {
            display: flex;
            transition: transform 0.5s ease;
            height: 100%;
        }
        
        .carousel-item {
            min-width: 100%;
            height: 100%;
            flex-shrink: 0;
        }
        
        .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .carousel-dots {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
        }
        
        .carousel-dots span {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            margin: 0 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .carousel-dots span.active {
            background-color: #fff;
            width: 20px;
            border-radius: 4px;
        }
        a{
        	color:black;
        	list-style: none;
        }
        #pageBar{
        	width:100%;
        	margin:10px auto;
        	margin-top:20px;
        	text-align: center;
        }
        #pageBar a{
        	margin:10px 10px;
        }
        #pageBar a:hover{
        	text-shadow: 0 2px 10px rgba(0, 0, 0, 1);
        	cursor: pointer;
        }
        #pageBar .activeColor{
        	color:#00A2E8;
        }
    </style>
</head>
<body>
<%@ include file="header.jsp" %>
    <div class="main-container">
        <div class="banner-section">
            <div class="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item">
                        <img src="image/手机/VOVO.png" alt="Banner 1">
                    </div>
                    <div class="carousel-item">
                        <img src="image/AMD/1.png" alt="Banner 2">
                    </div>
                    <div class="carousel-item">
                        <img src="image/智能手表/Apple.png" alt="Banner 3">
                    </div>
                    <div class="carousel-item">
                        <img src="image/手机/1.png" alt="Banner 4">
                    </div>
                </div>
                <div class="carousel-dots">
                    <span class="active"></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>
 
        <div class="category-tabs">
            <a href="#" class="tab-item active">推荐</a>
            <a href="#" class="tab-item">潮鞋</a>
            <a href="#" class="tab-item">服饰</a>
            <a href="#" class="tab-item">数码</a>
            <a href="#" class="tab-item">手表</a>
            <a href="#" class="tab-item">包包</a>
            <a href="#" class="tab-item">美妆</a>
            <a href="#" class="tab-item" id="allGoods">全部</a>
        </div>

        <div class="goods-section">
            <div class="goods-grid">
            </div>
            <div id="pageBar">
            
            </div>
        </div>
    </div>
<%@ include file="footer.jsp" %>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // 轮播图功能
        const carousel = document.querySelector('.carousel-inner');
        const dots = document.querySelectorAll('.carousel-dots span');
        let currentIndex = 0;
        const totalSlides = document.querySelectorAll('.carousel-item').length;
        let interval;
        
        // 启动轮播
        function startCarousel() {
            interval = setInterval(nextSlide, 3000);
        }
        
        // 下一张
        function nextSlide() {
            currentIndex = (currentIndex + 1) % totalSlides;
            updateCarousel();
        }
        
        // 跳转到指定幻灯片
        function goToSlide(index) {
            currentIndex = index;
            updateCarousel();
        }
        
        // 更新轮播图显示
        function updateCarousel() {
            const offset = -currentIndex * 100;
            // 改用传统字符串拼接代替模板字符串
            carousel.style.transform = 'translateX(' + offset + '%)';
            
            // 更新指示点
            dots.forEach((dot, index) => {
                dot.classList.toggle('active', index === currentIndex);
            });
            
            
            // 点击指示点切换
            dots.forEach((dot, index) => {
                dot.addEventListener('click', function(){
                    goToSlide(index);
                    changeType();
                });
            });
            
            function nextSlide() {
                currentIndex = (currentIndex + 1) % totalSlides;
                updateCarousel();
            }
            
            function goToSlide(index) {
                currentIndex = index;
                updateCarousel();
            }
            
            function updateCarousel() {
                const offset = -currentIndex * 100;
                carousel.style.transform = `translateX(${offset}%)`;
                
                // 更新指示点状态
                dots.forEach((dot, index) => {
                    if (index === currentIndex) {
                        dot.classList.add('active');
                    } else {
                        dot.classList.remove('active');
                    }
                });
            }
            
            // 分类标签切换效果
            const tabs = document.querySelectorAll('.tab-item');
            tabs.forEach(tab => {
                tab.addEventListener('click', function(e) {
                    e.preventDefault();
                    tabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                });
            });

        }
        
        // 点击指示点
        dots.forEach((dot, index) => {
            dot.addEventListener('click', function(){
                clearInterval(interval);
                goToSlide(index);
                startCarousel();
            });
        });
        
        // 鼠标悬停暂停
        document.querySelector('.carousel').addEventListener('mouseenter', () => {
            clearInterval(interval);
        });
        
        // 鼠标离开恢复
        document.querySelector('.carousel').addEventListener('mouseleave', startCarousel);
        
        // 初始化
        updateCarousel(); // 确保初始位置正确
        startCarousel();  // 开始自动轮播
        
        // 其他代码...
    });
    
    
        
        //分类显示的分页显示页脚
        var currentPage = 1;
        var currentType = "";
        function addPageBar(response){
        	currentPage = response.pageNum;
        	currentType = response.goodsType;
        	$('#pageBar').empty();
        	var $shouyea = $('<a onclick=changeType("'+currentType+'",1)>首页</a>');
        	$('#pageBar').append($shouyea);
        	
        	if(response.hasPrev){
        		var $prev = $('<a onclick=changeType("'+currentType+'",'+(currentPage-1)+')>上一页</a>');
            	$('#pageBar').append($prev);
        	}
        	for (var i = 0; i < response.navigatorNums.length; i++) {
				if(response.navigatorNums[i]==currentPage){
					var $num = $('<a onclick=changeType("'+currentType+'",'+response.navigatorNums[i]+') class="activeColor">'+response.navigatorNums[i]+'</a>');
	            	$('#pageBar').append($num);
				}else{
					var $num = $('<a onclick=changeType("'+currentType+'",'+response.navigatorNums[i]+')>'+response.navigatorNums[i]+'</a>');
	            	$('#pageBar').append($num);
				}
			}
        	if(response.hasNext){
        		var $next = $('<a onclick=changeType("'+currentType+'",'+(currentPage+1)+')>下一页</a>');
            	$('#pageBar').append($next);
        	}
        	var $shouyea = $('<a onclick=changeType("'+currentType+'",'+response.totalPages+')>尾页</a>');
        	$('#pageBar').append($shouyea)
        }
        
        
        
        //分类显示的标签
        var gdsType = document.querySelectorAll(".tab-item");
        function changeType(type,pageNum){
        	var pageSize = 12;
        	$.ajax({
        	    url: '/lego/selectGoods.do',
        	    type: 'POST',
        	    data: {
    	            goodsType:type,
    	            keyWord:"",
    	            pageNum:pageNum,
    	            pageSize:pageSize
    	        },
        	    success: function(response) {
        	    	var goods = response.data;
                    $('.goods-grid').empty();
                    for (var i = 0; i < goods.length ; i++) {
                    	 var $gpspan = $('<span class="goods-price">¥'+goods[i].price+'</span>');
                    	 var $gpdiv = $('<div></div>');
                    	 var $h3 = $('<h3 class="goods-title">'+goods[i].goodsName+'</h3>');
                    	 var $gidiv = $('<div class="goods-info"></div>');
                    	 var $img = $('<img src="'+goods[i].goodsImg+'" alt="商品" class="goods-img">');
                    	 var $gicdiv = $('<div class="goods-img-container"></div>');
                    	 var $div = $('<div class="goods-item"></div>');
                    	 var $a = $('<a href="purchase.do?goodsId='+goods[i].goodsId+'"></a>');
                    	 $gidiv.append($h3);
                    	 $gpdiv.append($gpspan);
                    	 $gidiv.append($gpdiv);
                    	 $gicdiv.append($img);
                    	 $div.append($gicdiv);
                    	 $div.append($gidiv);
                    	 $a.append($div);
                    	 $('.goods-grid').append($a);
                    }
                    addPageBar(response);
        	    },
        	   error: function(xhr, status, error) {
        	        console.error("AJAX请求失败:");
        	        console.log("状态码:", xhr.status);
        	        console.log("错误:", error);
        	        console.log("响应:", xhr.responseText);
        	        if(xhr.status === 404) {
        	            alert("接口不存在，请检查URL路径");
        	        }
        	    }
        	});
        }
        for (var i = 0; i < gdsType.length-1; i++) {
        	gdsType[i].addEventListener('click', function(){
        		var type = $(this).text();
            	changeType(type,1);
            });
		}
        $("#allGoods").click(function(e) {
        	e.preventDefault();
        	var newUrl = "/lego/selectGoods.do?goodsType=全部";
        	window.location.href = newUrl; // 跳转
        });
        changeType("推荐",1);
    </script>
</body>
</html>